<template>
  <div>
    <el-checkbox label="系统管理" v-model="checkAll" @change="changeAll"></el-checkbox>

    <el-checkbox-group v-model="checkedCities" @change="change">
      <el-checkbox v-for="(v, i) in list" :key="i" :label="v">{{ v }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const checkAll = ref(false)

const checkedCities = ref(['岗位管理'])

const list = ref(['组织管理', '岗位管理', '用户管理', '菜单管理', '角色管理'])

const change = (data) => {
  checkedCities.value = data;
  checkAll.value = data.length === list.value.length
}

const changeAll = (bool) => {
  if (bool)
    checkedCities.value = list.value;
  else
    checkedCities.value = []
}
</script>